<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>sky-gradient-9</title>
</head>
<style>
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #00000c;
    overflow: hidden;
  }
  .sky-gradient {
    z-index: 1;
    float: left;
    cursor: pointer;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    transform: translateZ(0);
    opacity: 1;
    transition: opacity 0s 10s;
    animation: fadeIn 5s ease-out;
    color: white;
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .sky-gradient:nth-child(1)::after {
    left: 0;
  }
  .sky-gradient:nth-child(2)::after {
    left: -100%;
  }
  .sky-gradient:nth-child(3)::after {
    left: -200%;
  }
  .sky-gradient:nth-child(4)::after {
    left: -300%;
  }
  .sky-gradient:nth-child(5)::after {
    left: -400%;
  }
  .sky-gradient:nth-child(6)::after {
    left: -500%;
  }
  .sky-gradient:nth-child(7)::after {
    left: -600%;
  }
  .sky-gradient:nth-child(8)::after {
    left: -700%;
  }
  .sky-gradient:nth-child(9)::after {
    left: -800%;
  }
  .sky-gradient:nth-child(10)::after {
    left: -900%;
  }
  .sky-gradient:nth-child(11)::after {
    left: -1000%;
  }
  .sky-gradient:nth-child(12)::after {
    left: -1100%;
  }
  .sky-gradient:nth-child(13)::after {
    left: -1200%;
  }
  .sky-gradient:nth-child(14)::after {
    left: -1300%;
  }
  .sky-gradient:nth-child(15)::after {
    left: -1400%;
  }
  .sky-gradient:nth-child(16)::after {
    left: -1500%;
  }
  .sky-gradient:nth-child(17)::after {
    left: -1600%;
  }
  .sky-gradient:nth-child(18)::after {
    left: -1700%;
  }
  .sky-gradient:nth-child(19)::after {
    left: -1800%;
  }
  .sky-gradient:nth-child(20)::after {
    left: -1900%;
  }
  .sky-gradient:nth-child(21)::after {
    left: -2000%;
  }
  .sky-gradient:nth-child(22)::after {
    left: -2100%;
  }
  .sky-gradient:nth-child(23)::after {
    left: -2200%;
  }
  .sky-gradient:nth-child(24)::after {
    left: -2300%;
  }
  .sky-gradient:nth-child(25)::after {
    left: -2400%;
  }
  /* Gradients */
  .sky-gradient-00, .sky-gradient-24 {
    background: #00000c;
  }
  .sky-gradient-01 {
    background: linear-gradient(to bottom, #020111 85%, #191621 100%);
  }
  .sky-gradient-02 {
    background: linear-gradient(to bottom, #020111 60%, #20202c 100%);
  }
  .sky-gradient-03 {
    background: linear-gradient(to bottom, #020111 10%, #3a3a52 100%);
  }
  .sky-gradient-04 {
    background: linear-gradient(to bottom, #20202c 0%, #515175 100%);
  }
  .sky-gradient-05 {
    background: linear-gradient(to bottom, #40405c 0%, #6f71aa 80%, #8a76ab 100%);
  }
  .sky-gradient-06 {
    background: linear-gradient(to bottom, #4a4969 0%, #7072ab 50%, #cd82a0 100%);
  }
  .sky-gradient-07 {
    background: linear-gradient(to bottom, #757abf 0%, #8583be 60%, #eab0d1 100%);
  }
  .sky-gradient-08 {
    background: linear-gradient(to bottom, #82addb 0%, #ebb2b1 100%);
  }
  .sky-gradient-09 {
    background: linear-gradient(to bottom, #94c5f8 1%, #a6e6ff 70%, #b1b5ea 100%);
  }
  .sky-gradient-10 {
    background: linear-gradient(to bottom, #b7eaff 0%, #94dfff 100%);
  }
  .sky-gradient-11 {
    background: linear-gradient(to bottom, #9be2fe 0%, #67d1fb 100%);
  }
  .sky-gradient-12 {
    background: linear-gradient(to bottom, #90dffe 0%, #38a3d1 100%);
  }
  .sky-gradient-13 {
    background: linear-gradient(to bottom, #57c1eb 0%, #246fa8 100%);
  }
  .sky-gradient-14 {
    background: linear-gradient(to bottom, #2d91c2 0%, #1e528e 100%);
  }
  .sky-gradient-15 {
    background: linear-gradient(to bottom, #2473ab 0%, #1e528e 70%, #5b7983 100%);
  }
  .sky-gradient-16 {
    background: linear-gradient(to bottom, #1e528e 0%, #265889 50%, #9da671 100%);
  }
  .sky-gradient-17 {
    background: linear-gradient(to bottom, #1e528e 0%, #728a7c 50%, #e9ce5d 100%);
  }
  .sky-gradient-18 {
    background: linear-gradient(to bottom, #154277 0%, #576e71 30%, #e1c45e 70%, #b26339 100%);
  }
  .sky-gradient-19 {
    background: linear-gradient(to bottom, #163C52 0%, #4F4F47 30%, #C5752D 60%, #B7490F 80%, #2F1107 100%);
  }
  .sky-gradient-20 {
    background: linear-gradient(to bottom, #071B26 0%, #071B26 30%, #8A3B12 80%, #240E03 100%);
  }
  .sky-gradient-21 {
    background: linear-gradient(to bottom, #010A10 30%, #59230B 80%, #2F1107 100%);
  }
  .sky-gradient-22 {
    background: linear-gradient(to bottom, #090401 50%, #4B1D06 100%);
  }
  .sky-gradient-23 {
    background: linear-gradient(to bottom, #00000c 80%, #150800 100%);
  }
</style>
<body>
<div class="sky-gradient sky-gradient-00">00</div>
<div class="sky-gradient sky-gradient-01">01</div>
<div class="sky-gradient sky-gradient-02">02</div>
<div class="sky-gradient sky-gradient-03">03</div>
<div class="sky-gradient sky-gradient-04">04</div>
<div class="sky-gradient sky-gradient-05">05</div>
<div class="sky-gradient sky-gradient-06">06</div>
<div class="sky-gradient sky-gradient-07">07</div>
<div class="sky-gradient sky-gradient-08">08</div>
<div class="sky-gradient sky-gradient-09">09</div>
<div class="sky-gradient sky-gradient-10">10</div>
<div class="sky-gradient sky-gradient-11">11</div>
<div class="sky-gradient sky-gradient-12">12</div>
<div class="sky-gradient sky-gradient-13">13</div>
<div class="sky-gradient sky-gradient-14">14</div>
<div class="sky-gradient sky-gradient-15">15</div>
<div class="sky-gradient sky-gradient-16">16</div>
<div class="sky-gradient sky-gradient-17">17</div>
<div class="sky-gradient sky-gradient-18">18</div>
<div class="sky-gradient sky-gradient-19">19</div>
<div class="sky-gradient sky-gradient-20">20</div>
<div class="sky-gradient sky-gradient-21">21</div>
<div class="sky-gradient sky-gradient-22">22</div>
<div class="sky-gradient sky-gradient-23">23</div>
<div class="sky-gradient sky-gradient-24">24</div>
</body>
<script>
  function updateVisibleDiv() {
    // 获取当前时间
    const now = new Date();
    const currentHour = now.getHours();
    // 隐藏所有的 div
    const allDivs = document.querySelectorAll('.sky-gradient');
    allDivs.forEach(div => div.style.display = 'none');
    // 显示当前小时对应的 div
    const currentDiv = document.querySelector(`.sky-gradient-${String(currentHour).padStart(2, '0')}`);
    if (currentDiv) {
      currentDiv.style.display = 'block';
    }
  }
  // 页面加载时立即执行一次
  updateVisibleDiv();
  // 每分钟更新一次（如果需要更精确，可以改为每秒更新）
  setInterval(updateVisibleDiv, 60000);
</script>
</html>